<!--**
* @author: SEKin
* @Date: 2025-01-02
* @description: 免密登录页
* @Last Modified time:
*-->
<template>
  <!--备注-->
  <div class="redirect-box">
    <div class="wrap">
      <div class="content-box" v-if="state.appName">
        <div class="time-box">
          <div class="timeVal" v-if="loginStatus === 'logining'">
            {{ time }}
          </div>
          <div
            class="login-tip"
            style="color: blue"
            v-else-if="loginStatus === 'success'"
          >
            成功
          </div>
          <div
            class="login-tip"
            style="color: #f33a3ae6"
            v-else-if="loginStatus === 'fail'"
          >
            <span> 错误 </span>
            <span class="try-again" @click="tryAagin" title="重试"
              ><i class="fa fa-refresh"></i
            ></span>
          </div>
        </div>
        <div class="system-info">
          <div class="system-logo">
            <img class="img-logo" :src="state.appLogo" alt="logo" />
          </div>
          <div class="system-name">{{ state.appName }}</div>
        </div>
        <div
          class="tip"
          :class="{ 'j-login': loginStatus === 'fail' }"
          @click="toLoginPage"
        >
          <span v-if="loginStatus === 'fail'"> 立即前往登录页 </span>
          <span v-else> 您即将前往{{ state.appName }}... </span>
        </div>
        <div style="margin-top: 1.5em">
          <div class="loading" :class="{ animate: loginStatus !== 'fail' }">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
        </div>
      </div>
    </div>
    <div class="bg"></div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, onUnmounted, nextTick } from 'vue';
import { message } from 'ant-design-vue';
import portalApi from 'apis/src/portal/common';
import loginApi from 'apis/src/portal/login';
import { getAssetsFile } from 'commons/src/imgUtil';
import { getHref } from 'utils/src/urlLocalSet';
import { traceCustomEvent } from '@web-tracing/vue3';

/**
 *@description 常数区
 */

/**
 *@description 状态保存区
 */
const state = reactive({
  appLogo: '', // 项目logo
  appName: '', // 项目名称
  token: '',
});

const time = ref(1);
const loginStatus = ref('logining');

/**
 *@description 方法区
 */

const toLoginPage = () => {
  if (loginStatus.value !== 'fail') {
    return;
  }
  window.location.href = location.pathname;
};

const tryAagin = () => {
  authorizeLogin();
};

let timeSet: number;
// 获取系统信息
const getAppInfo = () => {
  loginApi.getPortalInfo().then((res) => {
    state.appLogo = res.data.logUrl || getAssetsFile('app-logo.svg');
    state.appName = res.data.name || '医疗质量监控管理平台';
    nextTick(() => {
      authorizeLogin();
    });
  });
};

const authorizeLogin = () => {
  const urlObj = getHref(location.hash);
  if (!urlObj.token) {
    message.warn('请传入token！');
    loginStatus.value = 'fail';
    return;
  }
  traceCustomEvent({ title: '第三方登录', customType: 'login' });
  time.value = 1;
  loginStatus.value = 'logining';
  clearInterval(timeSet);
  timeSet = window.setInterval(() => {
    time.value++;
  }, 1000);
  portalApi
    .systemAuthorize({
      token: urlObj.token,
    })
    .then((res) => {
      clearInterval(timeSet);
      loginStatus.value = 'success';
      const { token } = res.data;
      localStorage.setItem('token', token);
      localStorage.setItem('isPwdExpired', 'N');
      window.location.href = `${location.pathname}#/home`;
    })
    .catch(() => {
      loginStatus.value = 'fail';
      clearInterval(timeSet);
    });
};

onUnmounted(() => {
  clearInterval(timeSet);
});

/**
 *@description 数据变更区
 */
getAppInfo();
</script>
<style lang="scss" scoped>
.redirect-box {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: url('../../assets/imgs/login-bg.png') no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.system-info {
  .system-name {
    font-size: 28px;
    margin-top: 20px;
  }
  .img-logo {
    width: 250px;
  }
}

div.j-login {
  cursor: pointer;
  box-shadow: -2px -2px 5px rgba(255, 255, 255, 1),
    3px 3px 5px rgba(0, 0, 0, 0.1);
}

.login-tip {
  font-size: 28px;
  position: relative;
  .try-again {
    position: absolute;
    bottom: -34px;
    width: 100%;
    left: 0;
    color: #6a9bd8;
    text-align: center;
    cursor: pointer;
    .fa {
      font-size: 22px;
    }
  }
}

.bg {
  height: 42vh;
  width: 50%;
  background: url('../../assets/imgs/login-img.png') no-repeat;
  background-size: contain;
  position: absolute;
  left: 0;
  bottom: 20px;
}

.time-box {
  width: 110px;
  height: 110px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -55%);
  background: linear-gradient(to bottom, #c7c2e0b7, #dff1f1d2);
  backdrop-filter: blur(18px);
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  border-left: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);

  .timeVal {
    font-size: 42px;
    color: #6a9bd8;
    font-weight: bold;
    font-family: 'Times New Roman', Times, serif;
  }
}

.wrap {
  padding-bottom: 5em;
}

.content-box {
  padding: 2em 3em;
  padding-top: 80px;
  position: relative;
  width: 550px;
  height: 350px;
  z-index: 2;

  background: linear-gradient(to bottom, #c7c2e060, #dff1f1b6);
  backdrop-filter: blur(2px);
  border-radius: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  border-left: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.2);
}

.tip {
  display: inline-block;
  margin-top: 1.5em;
  width: auto;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.6),
    rgba(233, 233, 233, 0.1)
  );
  border-radius: 13px 13px;
  padding: 0.6em 1.2em;
  color: #6a9bd8;
  font-size: 16px;

  box-shadow: inset -2px -2px 5px rgba(255, 255, 255, 1),
    inset 3px 3px 5px rgba(0, 0, 0, 0.12);
}

.loading,
.loading > div {
  position: relative;
  box-sizing: border-box;
}

.loading {
  display: block;
  font-size: 0;
  color: #6a9bd8;
}

.loading > div {
  display: inline-block;
  background-color: currentColor;
  border: 0 solid currentColor;
}

.loading {
  width: 120px;
  height: 18px;
}

.loading > div {
  width: 10px;
  height: 10px;
  margin: 4px;
  border-radius: 100%;
  opacity: 0;
}

.animate > div {
  animation: ball-fall 2.4s ease-in-out infinite;
}

.loading > div:nth-child(1) {
  animation-delay: -550ms;
}

.loading > div:nth-child(2) {
  animation-delay: -450ms;
}

.loading > div:nth-child(3) {
  animation-delay: -350ms;
}
.loading > div:nth-child(4) {
  animation-delay: -250ms;
}
.loading > div:nth-child(5) {
  animation-delay: -150ms;
}
.loading > div:nth-child(6) {
  animation-delay: 0ms;
}

@keyframes ball-fall {
  0% {
    opacity: 0;
    transform: translateY(-180%);
  }

  10% {
    opacity: 0.5;
  }

  20% {
    opacity: 1;
    transform: translateY(0);
  }

  80% {
    opacity: 1;
    transform: translateY(0);
  }

  90% {
    opacity: 0.5;
  }

  100% {
    opacity: 0;
    transform: translateY(160%);
  }
}
</style>
